<script setup>
import { onMounted, reactive } from "vue";
import dayjs from "dayjs";

defineProps({});
const emit = defineEmits([]);
let playInterval; //播放计时器

let myData = reactive({
  dateString: dayjs().format("YYYY-MM-DD HH:00:00"),
  value: 0, //model
  isPlay: false,
  timeData: [], //数据list
  playInterval: null, //播放计时器
  min: 0,
  max: 24,
  marks: {},
});

onMounted(() => {
  init();
});

//页面初始化
function init() {
  let timeRange = [];
  for (let i = myData.min; i < myData.max + 1; i++) {
    // if (i < 10) {
    //   timeRange.push(`0${i}:00`);
    // } else {
    //   timeRange.push(`${i}:00`);
    // }
    timeRange.push(`${i}`);
  }
  myData.timeData = timeRange;
  setMarker();
}

// 刻度初始化
function setMarker() {
  let marks = {};
  for (let i = 0; i <= myData.timeData.length; i++) {
    marks[i] = myData.timeData[i];
  }
  myData.marks = marks;
}

//时间轴操作按钮
function barClick(type) {
  const v = myData.value;
  if (type === "next") {
    myData.value = v >= myData.max ? 0 : v + 1;
    onlyChangeTime(myData.value);
  } else if (type === "play") {
    const isPlay = myData.isPlay;
    if (isPlay) {
      //暂停
      clearInterval(playInterval);
      playInterval = null;
      myData.isPlay = false;
    } else {
      //播放
      barClick("next");
      playInterval = setInterval(() => {
        barClick("next");
      }, 500);
      myData.isPlay = true;
    }
  }
}

//拖拽进度条修改时间
function onlyChangeTime(v) {
  console.log("刻度变化", v);
}
</script>

<template>
  <div id="timeAxis">
    <div class="timePicker">
      <el-date-picker
        class="maptimes"
        v-model="myData.dateString"
        value-format="YYYY-MM-DD HH:00:00"
        type="datetime"
        :clearable="false"
        placeholder="选择日期"
        popper-class="map-date-style"
      >
      </el-date-picker>
    </div>
    <div class="iconBox">
      <div
        :class="{ play_icon: true, play_icon1: myData.isPlay }"
        @click="barClick('play')"
      />
    </div>
    <div class="timeLine">
      <el-slider
        v-model="myData.value"
        :min="myData.min"
        :max="myData.max"
        :show-tooltip="true"
        @input="onlyChangeTime"
        :marks="myData.marks"
      />
    </div>
  </div>
</template>

<style lang="scss">
#timeAxis {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  // padding: 0 20px;
  justify-content: space-around;

  .timePicker {
    :deep().el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 160px;
    }
    :deep(.el-input__inner) {
      background: none !important;
      color: #fff;
      border: none !important;
    }
    :deep(.el-input__prefix) {
      color: #fff;
      position: absolute;
      right: 20px;
      left: auto;
      top: 0px;
    }
    :deep(.el-picker-panel) {
      background: rgb(4, 28, 58, 0.8) !important;
    }
    .maptimes {
      width: 135px !important;
      background: none;
      span {
        margin-left: 0px !important;
      }
    }
  }

  .iconBox {
    display: flex;
    .play_icon {
      width: 50px;
      height: 50px;
      background-image: url(./assets/play.png);
      background-size: 100% 100%;
      cursor: pointer;
    }
    .play_icon1 {
      background-image: url(./assets/suspend.png);
    }
  }

  .timeLine {
    width: 70%;
  }
}
</style>
